<!-- 空白市场详情 -->
<template>
  <div>
    <div class="header">
      <div class="i-top">
        <span class="color-black flex">
          <div class="round"><img src="@/assets/images/store.png" /></div>
          {{ detail.marketName }}</span
        >
      </div>
      <div class="address">
        <img class="icon" src="@/assets/images/position.png" />
        <div>
          <!-- class="overLine" -->
          {{ detail.provinceName }}{{ detail.cityName }}{{ detail.districtName }}{{ detail.streetName }}
        </div>
      </div>
      <div class="tags">{{ getDictName('CITY_LEVEL', detail.cityLevel) }}</div>
    </div>

    <Cell title="所属办事处" :modelValue="detail.agencyName" default-value="" readonly />
    <Cell title="市场属性" :modelValue="detail.marketNatrue" default-value="" readonly dict-type-code="MARKET_NATURE" />
    <Cell title="是否有老商家" :modelValue="booleanMap(detail.isOldMerchant)" default-value="" readonly />
    <Cell title="是否有遗留问题" :modelValue="booleanMap(detail.isLegacyProblem)" default-value="" readonly />
    <Cell title="遗留问题说明" :modelValue="detail.legacyProblemMsg" default-value="" readonly custom />
    <Cell title="完成招商" :modelValue="booleanMap(detail.isAttractInvestment)" default-value="" readonly />
    <Cell
      title="办事处任务分配状态"
      :modelValue="detail.taskStatus"
      default-value=""
      readonly
      dict-type-code="CTM_ALLOCATE_STYLE"
    />
    <Cell
      title="数据来源"
      :modelValue="detail.dataSource"
      default-value=""
      readonly
      dict-type-code="CTM_MARKET_DATA_FROM"
    />
  </div>
</template>

<script lang="ts">
  import { reactive, toRefs } from 'vue'
  import Cell from '@/components/Cell/index.vue'
  import { useRoute } from 'vue-router'
  import { detailItem } from '@/apis/attractInvestment/blankMarket'
  import { getDictByPatchType } from '@/apis/dataDict'

  interface anyObjectModle {
    id: any
    detail: any
    dictData: any
  }
  export default {
    name: 'BlankMarketDetail',
    components: { Cell },
    setup() {
      const $route = useRoute()

      const state = reactive<anyObjectModle>({
        id: $route.query.id || '',
        detail: {},
        dictData: {}
      })

      const getDictName = (dictType: string, code: any) => {
        if (!dictType || [undefined, null, ''].includes(code)) return ''
        let name = code
        const dictList = state.dictData[dictType] || []
        if (dictList.length > 0) {
          const obj = dictList.find((v: any) => v.dictCode === `${code}`)
          name = obj?.dictName || code
        }
        return name
      }

      const booleanMap = (val: number) => {
        const map: any = {
          1: '是',
          0: '否'
        }
        return map[val] || ''
      }

      // 获取数据字典
      const getDictData = async () => {
        const dictTypeCodes = ['MARKET_NATURE', 'CITY_LEVEL', 'CTM_MARKET_DATA_FROM']
        state.dictData = await getDictByPatchType({ dictTypeCodes })
      }

      getDictData()

      const getDetail = () => {
        const id = `${state.id}`
        detailItem(id).then((res: any) => {
          state.detail = res.data
        })
      }
      getDetail()

      return {
        ...toRefs(state),
        getDictName,
        booleanMap
      }
    }
  }
</script>

<style lang="less" scoped>
  .header {
    margin: 8px 0;
    padding: 16px 14px;
    background: var(--bg-global-weaker);
    border-radius: 0px 0px 0px 0px;
    .i-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 24px;
      font: var(--font-main-title-strengthen);

      .flex {
        display: flex;
        align-items: center;

        .round {
          width: 24px;
          height: 24px;
          background: var(--texticon-color-warning-normal);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 4px;

          img {
            width: 16px;
            height: 16px;
          }
        }
      }
      .icon {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }

      .right {
        font: var(--font-main-body);
      }
    }

    .address {
      display: flex;
      align-items: center;
      margin-top: 4px;
      min-height: 20px;
      margin-bottom: 6px;
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 6px;
      }
    }

    .tags {
      font: var(--font-main-title-strengthen);
      color: var(--texticon-color-warning-normal);
    }
  }
</style>
